<template>
	<div>
		<div style="display: inline-block;">
			<span>状态：</span>
			<el-select v-model="statusT" style="width:150px;margin-left: 10px;" @change="select()">
				<el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;
			<div style="position: relative;display: inline-block;">
				<span>手机号：</span>
				<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入手机号" v-model="phoneT">
				</el-input>&nbsp;&nbsp;
			</div>
			<div style="position: relative;display: inline-block;">
				<span>昵称：</span>
				<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入昵称" v-model="userNameT">
				</el-input>&nbsp;&nbsp;
			</div>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
			</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
			</el-button>
			<el-button style='margin:0 0 20px 20px;' v-if="isAuth('autonym:pass')" size="mini" type="primary"
				icon="document" @click="passClick()" :disabled="checkBoxData.length <= 0">通过</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="tableData.list">

			<el-table-column prop="userId" label="编号" width="80">
				<!-- <template slot-scope="scope">
					<span>{{scope.$index+1}}</span>
				</template> -->
			</el-table-column>
			<el-table-column prop="nickName" label="昵称">
				<template slot-scope="scope">
					<span style="color: #4f9dec;cursor: pointer;"
						@click="updates(scope.row)">{{scope.row.nickName ? scope.row.nickName : '未绑定'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="realName" label="真实姓名">
				<template slot-scope="scope">
					<span>{{scope.row.realName ? scope.row.realName : '未绑定'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="birthMention" label="出生日期" width="125">
				<template slot-scope="scope">
					<span>{{scope.row.birthMention ? scope.row.birthMention : '未绑定'}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="drivingYear" label="驾龄(年)">
				<template slot-scope="scope">
					<span>{{scope.row.drivingYear ? scope.row.drivingYear : '未绑定'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="电话" width="150">
			</el-table-column>
			<el-table-column prop="identityCardNumber" label="身份证号" width="165">
			</el-table-column>
			<el-table-column prop="identityCardFront" label="身份证正面">
				<template slot-scope="scope">
					<div v-if="scope.row.identityCardFront == null || scope.row.identityCardFront == ''">
						暂无图片
					</div>
					<div v-else-if="scope.row.identityCardFront.includes(',')" style="display:flex;flex-wrap: wrap;">
						<div v-for="item in scope.row.identityCardFront.split(',')" style="margin: 2px;">
							<el-popover placement="top-start" title="" trigger="hover">
								<img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
								<img style="width: 300px; height: 300px" :src="item" alt="">
							</el-popover>
						</div>
					</div>
					<div v-else>
						<el-popover placement="top-start" title="" trigger="hover">
							<img style="width: 50px; height: 50px" :src="scope.row.identityCardFront" alt=""
								slot="reference">
							<img style="width: 300px; height: 300px" :src="scope.row.identityCardFront" alt="">
						</el-popover>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="identityCardVerso" label="身份证反面">
				<template slot-scope="scope">
					<div v-if="scope.row.identityCardVerso == null || scope.row.identityCardVerso == ''">
						暂无图片
					</div>
					<div v-else-if="scope.row.identityCardVerso.includes(',')" style="display:flex;flex-wrap: wrap;">
						<div v-for="item in scope.row.identityCardVerso.split(',')" style="margin: 2px;">
							<el-popover placement="top-start" title="" trigger="hover">
								<img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
								<img style="width: 300px; height: 300px" :src="item" alt="">
							</el-popover>
						</div>
					</div>
					<div v-else>
						<el-popover placement="top-start" title="" trigger="hover">
							<img style="width: 50px; height: 50px" :src="scope.row.identityCardVerso" alt=""
								slot="reference">
							<img style="width: 300px; height: 300px" :src="scope.row.identityCardVerso" alt="">
						</el-popover>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="drivingLicence" label="师傅驾驶证图片">
				<template slot-scope="scope">
					<div v-if="scope.row.drivingLicence == null || scope.row.drivingLicence == ''">
						暂无图片
					</div>
					<div v-else-if="scope.row.drivingLicence.includes(',')" style="display:flex;flex-wrap: wrap;">
						<div v-for="item in scope.row.drivingLicence.split(',')" style="margin: 2px;">
							<el-popover placement="top-start" title="" trigger="hover">
								<img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
								<img style="width: 300px; height: 300px" :src="item" alt="">
							</el-popover>
						</div>
					</div>
					<div v-else>
						<el-popover placement="top-start" title="" trigger="hover">
							<img style="width: 50px; height: 50px" :src="scope.row.drivingLicence" alt=""
								slot="reference">
							<img style="width: 300px; height: 300px" :src="scope.row.drivingLicence" alt="">
						</el-popover>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="checkCertificationMessage" label="省市区" width="160">
				<template slot-scope="scope">
					<span>{{scope.row.province}}/{{scope.row.city}}/{{scope.row.district}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="checkCertificationMessage" label="审核内容" width="160">
			</el-table-column>

			<el-table-column prop="createTime" label="创建时间" width="170">
			</el-table-column>
			<el-table-column fixed='right' prop="status" label="状态" width="160">
				<template slot-scope="scope">
					<span v-if="scope.row.checkCertification == '0'">待审核</span>
					<span v-if="scope.row.checkCertification == '1'">审核成功</span>
					<span v-if="scope.row.checkCertification == '2'">已拒绝</span>
				</template>
			</el-table-column>
			<el-table-column fixed='right' label="操作" width="180">
				<template slot-scope="scope">
					<el-button size="mini" type="primary"
						:disabled="!isAuth('autonym:jujue') || scope.row.checkCertification !== '0'"
						@click="refuseClick(scope.row)" style="margin: 5px;">
						拒绝
					</el-button>
					<el-button size="mini" type="primary"
						:disabled="!isAuth('autonym:tongguo') || scope.row.checkCertification !== '0'"
						@click="passClicks(scope.row)" style="margin: 5px;">通过
					</el-button>
					<el-button size="mini" type="primary" :disabled="!isAuth('autonym:tongguo')"
						@click="updateClicks(scope.row)" style="margin: 5px;">修改
					</el-button>
					<el-button size="mini" type="warning" :disabled="!isAuth('autonym:tongguo')" style="margin: 5px;"
						@click="delClicks(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
			</el-pagination>
		</div>
		<!-- 任务拒绝弹框 -->
		<el-dialog title="拒绝" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 10px;">
				<span
					style="width: 200px;display: inline-block;text-align: right;position: relative;top: -70px;">拒绝理由：</span>
				<el-input style="width:50%;" v-model="content" type="textarea" :rows="4" placeholder="请输入拒绝理由">
				</el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="refuseto()">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改认证信息" :visible.sync="dialogFormVisibleR" center>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">昵称：</span>
				<el-input style="width:50%;" v-model="userName" type="text" placeholder="请输入昵称"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">真实姓名：</span>
				<el-input style="width:50%;" v-model="realName" type="text" placeholder="请输入真实姓名"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">驾龄(年)：</span>
				<el-input style="width:50%;" v-model="drivingYear" type="text" placeholder="请输入驾龄"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">出生日期：</span>
				<el-date-picker style="width:50%;" v-model="birthMention" type="date" placeholder="请输入出生日期"
					format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">电话：</span>
				<el-input style="width:50%;" v-model="phone" type="text" placeholder="请输入电话"></el-input>
			</div>
			<div style="display: inline-block;margin:10px;">
				<span>省市区：</span>
				<el-cascader style="width:150px" size="large" :options="options" ref="cascaderAddr"
					v-model="storeAddress" :placeholder="storeAddre" @change="handleChange5" :value="storeAddre">
				</el-cascader>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">身份证号：</span>
				<el-input style="width:50%;" v-model="identityCardNumber" type="text" placeholder="请输入身份证号"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">身份证正面图：</span>
				<div style="display: inline-block;">
					<el-upload class="avatar-uploader" v-model="identityCardFront"
						:action="$http.adornUrlUp('alioss/upload')" :show-file-list="false"
						:on-success="handleAvatarSuccess1">
						<img v-if="identityCardFront" :src="identityCardFront" class="avatar"
							style="width: 148px;height: 148px;" />
						<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
					</el-upload>
				</div>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">身份证反面图：</span>
				<div style="display: inline-block;">
					<el-upload class="avatar-uploader" v-model="identityCardVerso"
						:action="$http.adornUrlUp('alioss/upload')" :show-file-list="false"
						:on-success="handleAvatarSuccess2">
						<img v-if="identityCardVerso" :src="identityCardVerso" class="avatar"
							style="width: 148px;height: 148px;" />
						<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;"></i>
					</el-upload>
				</div>
			</div>

			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">师傅驾驶证图片：</span>
				<div
					style="display: inline-block;width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
					<el-upload class="avatar-uploader" v-model="drivingLicence"
						:action="$http.adornUrlUp('alioss/upload')" :show-file-list="false"
						:on-success="handleAvatarSuccess3">
						<img v-if="drivingLicence" :src="drivingLicence" class="avatar"
							style="width: 148px;height: 148px;" />
						<i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d"></i>
					</el-upload>
				</div>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleR = false">取 消</el-button>
				<el-button type="primary" @click="refusetoUp()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	export default {
		data() {
			return {
				limit: 10,
				page: 1,
				content: '',
				status: -1,
				statusT: -1,
				statesnum: [{
						value: -1,
						label: '全部'
					},
					{
						value: 0,
						label: '待审核'
					}, {
						value: 1,
						label: '审核成功'
					}, {
						value: 2,
						label: '拒绝'
					}
				],
				phoneT: '',
				userNameT: '',
				activeName: 'first',
				tableDataLoading: false,
				dialogFormVisible: false,
				tableData: [],
				checkBoxData: [], //多选框选择的值
				helpTakeId: '',
				// ````
				phone: '',
				userName: '',
				identityCardNumber: '',
				identityCardFront: '',
				identityCardVerso: '',
				selfIdentityCard: '',
				drivingLicence: '',
				userId: '',
				realName: '',
				drivingYear: '',
				birthMention: '',
				dialogFormVisibleR: false,
				userIds: '',

				province: '', //省
				city: '', //市
				district: '', //区
				// address: '', //详细地址
				// latitude: '', //纬度
				// longitude: '', //经度
				options: regionData,
				storeAddress: [],
				storeAddre: '请选择城市',
			}
		},
		methods: {
			// 多选
			changeFun(val) {
				this.checkBoxData = val;
			},
			// 详情跳转
			updates(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},
			handleAvatarSuccess1(file, fileList) {
				this.identityCardFront = file.data
			},
			handleAvatarSuccess2(file, fileList) {
				this.identityCardVerso = file.data
			},
			handleAvatarSuccess3(file, fileList) {
				this.drivingLicence = file.data
			},
			handleSizeChange(val) {
				this.limit = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
			//任务通过
			passClick(id) {
				this.status = 1
				this.content = '同意'
				var ids = id ? [id] : this.checkBoxData.map(item => {
					return item.id
				})
				this.$http({
					url: this.$http.adornUrl(
						`student/auditStudentAuthentication/${ids}/${this.status}/${this.content}`),
					method: 'post',
					data: this.$http.adornData({})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.content = ''
								this.status = -1
								this.dataSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
							onClose: () => {
								this.content = ''
								this.status = -1
								this.dataSelect()
							}
						})
					}
				})
			},
			//单条任务通过
			passClicks(row) {
				this.status = 1
				this.content = '同意'
				this.$http({
					url: this.$http.adornUrl(
						`adminerrand/checkCertification`),
					method: 'post',
					params: this.$http.adornParams({
						'userId': row.userId,
						'checkCertification': this.status,
						'checkCertificationMessage': '审核通过'
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.content = ''
								this.status = -1
								this.dataSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
							onClose: () => {
								this.content = ''
								this.status = -1
								this.dataSelect()
							}
						})
					}

				})
			},
			//任务拒绝
			refuseClick(rows) {
				this.status = 2
				this.helpTakeId = rows.userId
				this.content = ''
				this.dialogFormVisible = true
			},
			refuseto() {
				if (this.content == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入拒绝理由',
						type: 'warning'
					});
					return
				}
				this.$http({
					url: this.$http.adornUrl(
						`adminerrand/checkCertification`
					),
					method: 'post',
					params: this.$http.adornParams({
						'userId': this.helpTakeId,
						'checkCertification': this.status,
						'checkCertificationMessage': this.content
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.dialogFormVisible = false
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.content = ''
								this.status = -1
								this.dataSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
							onClose: () => {}
						})
					}

				})
			},
			// 查询
			select() {
				this.page = 1
				this.limit = 10
				this.dataSelect()
			},
			// 重置
			cleans() {
				this.statusT = -1
				this.userNameT = ''
				this.phoneT = ''
				this.dataSelect()
			},
			// 获取派单数据列表
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('adminerrand/findAllCertification'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'phone': this.phoneT,
						'nickName': this.userNameT,
						'checkCertification': this.statusT
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
				})
			},
			// 删除
			delClicks(row) {
				this.userIds = row.userId
				this.$confirm(`确定要删除此条实名认证吗`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deletes()

				}).catch(() => {})
			},
			deletes() {
				this.$confirm(`删除实名认证后，师傅将无法接单，确定删除?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('adminerrand/deleteCertification'),
						method: 'post',
						params: this.$http.adornParams({
							'userId': this.userIds
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.dataSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {}
							})
						}

					})
				}).catch(() => {})
			},
			updateClicks(row) {
				this.phone = row.phone
				this.userName = row.nickName
				this.identityCardNumber = row.identityCardNumber
				this.identityCardFront = row.identityCardFront
				this.identityCardVerso = row.identityCardVerso
				this.userId = row.userId
				this.identityCardNumber = row.identityCardNumber
				this.realName = row.realName
				this.birthMention = row.birthMention
				this.drivingLicence = row.drivingLicence
				this.drivingYear = row.drivingYear
				if (row.province) {
					this.province = row.province
					this.city = row.city
					this.district = row.district
					this.storeAddress = []
					this.storeAddre = this.province + '/' + this.city + '/' + this.district
				} else {
					this.province = ''
					this.city = ''
					this.district = ''
					this.storeAddress = []
					this.storeAddre = '请选择省市区'
				}

				this.dialogFormVisibleR = true
			},
			refusetoUp() {
				if (this.userName == '' || this.userName == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '昵称不能为空',
						type: 'warning'
					})
					return
				}
				if (this.phone == '' || this.phone == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '手机号不能为空',
						type: 'warning'
					})
					return
				}
				if (this.identityCardNumber == '' || this.identityCardNumber == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '身份证号不能为空',
						type: 'warning'
					})
					return
				}
				if (this.realName == '' || this.realName == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '真实姓名不能为空',
						type: 'warning'
					})
					return
				}
				if (this.drivingYear === '' || this.drivingYear == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '驾龄不能为空',
						type: 'warning'
					})
					return
				}
				if (this.birthMention == '' || this.birthMention == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '出生日期不能为空',
						type: 'warning'
					})
					return
				}
				if (this.identityCardFront == '' || this.identityCardFront == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传身份证正面照',
						type: 'warning'
					})
					return
				}
				if (this.identityCardVerso == '' || this.identityCardVerso == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传身份证背面照',
						type: 'warning'
					})
					return
				}
				if (this.drivingLicence == '' || this.drivingLicence == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传驾驶证照片',
						type: 'warning'
					})
					return
				}
				if (this.province == '' || this.province == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择省市区',
						type: 'warning'
					})
					return
				}
				this.$http({
					url: this.$http.adornUrl('adminerrand/updateCertification'),
					method: 'post',
					data: this.$http.adornData({
						'userId': this.userId,
						'phone': this.phone,
						'userName': this.userName,
						'identityCardNumber': this.identityCardNumber,
						'identityCardFront': this.identityCardFront,
						'identityCardVerso': this.identityCardVerso,
						'realName': this.realName,
						'birthMention': this.birthMention,
						'drivingLicence': this.drivingLicence,
						'drivingYear': this.drivingYear,
						'province': this.province,
						'city': this.city,
						'district': this.district,

					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dialogFormVisibleR = false
								this.dataSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {}
						})
					}
				})
			},
			// 获取省市区
			handleChange5(value) {
				value = this.$refs['cascaderAddr'].currentLabels
				this.province = value[0]
				this.city = value[1]
				this.district = value[2]
				if (this.city == '市辖区') {
					this.city = ''
				}
			},
			dataSelect1() {
				if (this.$route.query.status) {
					this.statusT = Number(this.$route.query.status)
				} else {
					this.statusT = -1
				}
				this.dataSelect()
			},
		},
		mounted() {
			if (this.$route.query.status == 0) {
				this.statusT = Number(this.$route.query.status)
			} else {
				this.statusT = -1
			}
			this.dataSelect()
		},
		watch: {
			'$route': 'dataSelect1'
		}
	};
</script>

<style>

</style>